<template>
<div style="width: 100%">
  <div>
    <van-nav-bar
        title="酒店查询"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />

  </div>
  <div>
  <form action="/housinfo" style="width: 100%">
    <van-button type="primary"  size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 15%;float:right;margin-right: 10px;margin-top: 15px" @click="all()">
      搜索
    </van-button>
    <van-search
        v-model="this.hous.housname"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
    />
  </form>
  </div>
  <div>
    <van-notice-bar color="#1989fa" background="#ecf9ff" scrollable text="有阳光照耀的地方就有我默默的祝福，当月光洒向地球的时候就有我默默的祈祷，当流星划过的刹那我许了个愿：祝你平安健康！" />
  </div>
  <div>
    <van-tabs v-model:active="active" >
      <van-tab >
        <div class="dv1" v-for="a in hous" >
          <van-row>
            <van-col :span="10">
              <img class="img1" :src="a.imgurl" @click="chack(a.id)">
            </van-col>
            <van-col :span="13">
              <h4 class="dv2">{{ a.title }}</h4>
              <div class="dv2">酒店名字：{{ a.housname }}</div>
              <div class="dv2">酒店详情：{{ a.info }}</div>
            </van-col>
          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</div>
</template>

<script>
import { Toast } from 'vant';
import { createApp } from 'vue';
import { NoticeBar } from 'vant';

const app = createApp();
app.use(NoticeBar);
export default {
  name: "HousInfoView",
  data() {
    const onCancel = () => Toast('取消');
    return {
      active:0,
      hous:[
        {
          id:"",
          housname:"",
          houstype:"",
          housprice:"",
          location:"",
          info:'',
          imgurl: ""
        }
      ],
      value:"",
      onCancel,
    };
  },mounted() {
    //请求接口
    this.axios.get("/api/housinfo/all.do").then(r=>{
      if(r.data.code==200){
        //
        this.hous=r.data.data;
      }
    })
} ,methods:{
    back(){
      history.back();
    },
    all(){
      this.type=this.active+1;
      //请求接口
      if (this.hous.housname==undefined){
        this.hous.housname=""
      }
      this.axios.get("/api/housinfo/byname.do?housname="+this.hous.housname).then(r=>{
        if(r.data.code==200){
          //
          this.hous=r.data.data;
        }
      })
    },chack(id){
      console.log(this.hous.id)
      this.$router.push({path:"/houspay",query:{id:id}});
    }
  }
};
</script>

<style scoped>
.dv1{
  background-color: ghostwhite;
  width: 90%;
  margin-left: 5%;
  border: 1px solid gainsboro;
  box-shadow: 5px 5px 3px gainsboro;
  border-radius: 20px;
  margin-bottom: 10px;
}
.img1{
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
</style>